//新增思想观点

<template>
    <div class="new-i">
        <div class="header">
            <span>新增思想观点</span>
            <el-button type="warning" @click="Back" style="width:100px">返回</el-button>
        </div>
        <div class="line"></div>
        <el-form :model="idea" label-width="120px" style="margin:50px 0;padding: 20px;" :rules="rules"
            ref="ruleFormRef">
            <el-form-item label="观点标题" prop="title">
                <el-input v-model="idea.title" placeholder="请输入观点标题" style="width:500px" size="large" />
            </el-form-item>
            <!--图片上传 -->
            <el-form-item label="上传配图">
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="upload">
                    <el-icon>
                        <Plus />
                    </el-icon>

                    <template>
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="idea.imageUrl" alt="" />
                            <span class="el-upload-list__item-actions">
                            </span>
                        </div>
                    </template>
                </el-upload>
                <span style="margin:20px">上传图片不要超过2M</span>
            </el-form-item>


            <el-form-item label="观点简介" prop="content">
                <el-input v-model="idea.content" placeholder="请输入观点简介不要超过300字，显示在二级列表页" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="推荐至首页" prop="checked">
                <el-select v-model="idea.checked" placeholder="请选择">
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                </el-select>
            </el-form-item>
            <el-form-item label="排序位" prop="sort">
                <el-input v-model="idea.sort" placeholder="0" style="width:300px" />
            </el-form-item>
            <el-form-item label="观点详情">

                <!-- 富文本插件 -->
                <div style="border: 2px solid #ccc;width:1000px;height: 300px;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                        :mode="mode" @onCreated="handleCreated" />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="handleSave(ruleFormRef)" style="width:150px;height: 40px;">保存
                </el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script setup>
// do not use same name with ref
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { useRouter, useRoute } from 'vue-router'
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import dayJs from 'dayjs'


import useIdeaData from '../../store/idea'

const store = useIdeaData()
const router = useRouter()
const route = useRoute()
const mode = ref()
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const disabled = ref(false)

const ruleFormRef = ref()
// 内容 HTML
const valueHtml = ref('<p></p>')

const idea = reactive({
    id: parseInt(Math.random() * (100 - 0 + 1) + 1, 10),
    title: '',
    content: '',
    channel: '组织变革',
    checked: '',
    imageUrl: '',
    sort: '',
    detail: '',
    time: dayJs(new Date()).format("YYYY.MM.DD"),
})



//上传图片地址


const upload = (image) => {
    idea.imageUrl = image.url.slice(5)
    console.log(image.url.slice(5))
    console.log(idea.imageUrl)
}



//数据的查找
// console.log(route.query)
const { id } = route.query
console.log(id)
if (id) {
    const res = store.findIdea(id)
    idea.id = res.id
    idea.title = res.title
    idea.content = res.content
    idea.checked = res.checked
    idea.imageUrl = res.imageUrl
    idea.sort = res.sort
    idea.detail = res.detail
    valueHtml.value = idea.detail
    console.log(res)
}




const Back = () => {
    router.back()
}

//保存事件
const handleSave = (formEl) => {
    console.log(formEl)
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            idea.detail = valueHtml.value

            store.addIdeaData(idea)
            console.log(idea.detail)
            ElMessage.success('保存成功')
            router.push('/content/idea')
        } else {
            ElMessage.error('提交失败')
            return false
        }
    })


}


//富文本


// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = '<p></p>'
    }, 1500)
})

const toolbarConfig = {

    excludeKeys: [
        'fontSize',
        'fontFamily',
        'lineHeight',

    ]
}


const editorConfig = { placeholder: '请输入详情内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

// const editorOption = {
//     modules: {
//         toolbar: [
//             ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
//             ['blockquote', 'code-block']
//         ]
//     }
// }
//表单校验
const rules = reactive({
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        }
    ],
    content: [
        {
            required: true,
            message: '请输入简介',
        }
    ],
    checked: [
        {
            required: true,
            message: '请选择是否推荐到首页',
        }
    ],
    sort: [
        {
            required: true,
            message: '请输入排序位',
        }
    ],
})
</script>


<style  lang="less" scoped>
.header {
    width: 100%;
    height: 40px;
    padding: 5px;
    color: rgb(255, 153, 0);
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-content: center;

    span {
        display: inline-block;
        width: 100px;
        font-weight: 900;
        height: 26px;
    }
}

.line {
    height: 10px;
    width: 100%;
    background-color: rgb(246, 239, 239);
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

// 富文本样式
#editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100;
    /* 按需定义 */
}

#toolbar-container {
    border-bottom: 1px solid #ccc;
}

#editor-container {
    height: 500px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>